<script type="text/template" id="camera-watch-page-template">
	<div class="row large-collapse">
		<div class="small-12 columns title-heading">
			<h1 class="bold">{{astroboxName}} · Camera</h1>
		</div>
	</div>
<% if(this.cameraAvailable) { %>
	<% if(this.videoStreamingError){ %>
		<div class="panel text-center radius">
			<i class="icon-camera"></i>
			<% if(this.videoStreamingErrorTitle){ %>
				<h3 class="bold"><%= this.videoStreamingErrorTitle %></h3>
			<% } else { %>
				<h3 class="bold">Camera error</h3>
			<% } %>
			<p><%= this.videoStreamingError %></p>
      {% if mfDefinition.variant.allow_camera_settings %}
        <p><b>Did you plug another camera?</b> Did you selected a correct "Video Format" and resolution in settings?</p><p>Please, <a href="/#settings/video-stream"><b>click here</b></a> and press <b>"Scan for Cameras"</b> button
      {% endif %}
			</p>
		</div>
	<% } else {
		if(this.cameraNotSupported) { %>

		<div class="panel text-center radius">
			<i class="icon-attention"></i>
			<h3 class="bold">Camera is not supported by Astrobox</h3>
			<p>It appears that your camera is not supported.</p>
      {% if mfDefinition.variant.allow_camera_settings %}
			 <p>Please, connect another camera, <a href="/#settings/video-stream"><b>click here</b></a> and press the <b>"Scan for Cameras"</b> button</p>
      {% endif %}
		</div>

		<% } else { %>

			<div class="row large-collapse">
				<div class="video">
					<div class="camera-view">
						<div class="row nowebrtc alert-box radius">
							<div class="large-3 large-centered columns show-for-large-up">
								<img class="sadmonkey" src="static/img/sadmonkey-2.png"/>
							</div>
							<div class="small-12 large-8 columns text-center small-centered">
                <b>Oops!</b>, You are using <%= navigator.sayswho %>.
                {# Using Chrome #}
                <% if (navigator.sayswho.indexOf('Chrome') != -1) { %>
                  {# Chrome v74 or up #}
                  <% if ( navigator.sayswho.replace( /^\D+/g, '') >= 74 ) { %>
                    Due to its new Security restrictions:
                    <ol class="small-9 column small-centered">
                      <li>
                        <span>Go to: <b class="micro-link">chrome://flags/#unsafely-treat-insecure-origin-as-secure</b>.</span>
                      </li>
                      <li>Copy <b class="micro-link text-to-copy">http://<%= window.location.hostname  %></b> into the text area.</li>
                      <li>Relaunch Chrome.</li>
                    </ol>
                    <p>* This is a temporary solution while we work on it ;)</p>
                  {# Chrome up to v73 #}
                  <% } else { %>
	                This browser can only stream video in VP8
                  encoding. <br>You can change the video enconding <a href="http://<%= window.location.hostname%>/#settings/video-stream">here</a>
                  <br>Select VP8 instead of H264.
                  You also can download
                  <% } %>
                {# Not using Chrome #}
								<% } else { %>
									 Looks like Streaming Video is incompatible with your browser. Download
                  one of these great browsers and you'll be monitoring your 3D Printer with streaming video in no time!
                <% } %>

                <ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-3 browser-links">
									<li>
										<a href="https://www.google.com/chrome/" class="bold" target="_blank">
											<img src="static/img/chrome-icon.png"/><br>
											<b>Chrome</b>
										</a>
									</li>
									<li>
										<a href="https://www.mozilla.org/en-US/firefox/new/" class="bold" target="_blank">
											<img src="static/img/firefox-icon.png"/><br>
											<b>Firefox</b>
										</a>
									</li>
									<li>
										<a href="https://www.apple.com/safari/" class="bold" target="_blank">
											<img src="static/img/safari-icon.png"/><br>
											<b>Safari</b>
										</a>
									</li>
								</ul>


							</div>
						</div>
						<div class="row error alert-box radius">
							<div class="small-12 large-9 columns">
								<b>Oops!</b>, There is currently an error with Streaming Video.<br>
								 <p><b>A few things to try:</b> Check the connection from your AstroBox to your camera, reboot your AstroBox, or return to your <a href="#" ><b>Dashboard</b></a> and try again later.</p>
							</div>
							<div class="large-3 columns show-for-large-up">
								<img src="static/img/sadmonkey-2.png"/>
							</div>
						</div>
						<div class="image-container">
							<% if(this.cameraMode == 'video') { %>
								<div class="row video-container text-center">
									<div class="video-off">
										<div class="v-align">
											<i class="icon-videocam-1"></i>
											<h3 class="bold">Video Stream Off</h3>
										</div>
									</div>
									<div class="video-preparing">
										<div class="v-align">
											<i class="icon-rocket-spinner animate-spin"></i>
											<h3 class="bold">Preparing Video...</h3>
										</div>
									</div>
									<div id="videoScreen" class="video-on text-center">
										<img id="video-stream" class="cover-img-cont v-align"/>
									</div>
								</div>
							<% } else { %>
								<div class="row video-container">
										<div class="video-off">
											<div class="v-align camera-screen">
												<i class="icon-camera"></i>
												<h3 class="bold">Still Pictures</h3>
											</div>
												<img class="camera-image v-align"/>
										</div>
								</div>
							<% } %>
						</div>
						<div class="row collapse buttons text-center">
							<div class="small-12 large-3 columns show-for-large-up">&nbsp;</div>
							<% if(this.cameraMode == 'video') { %>
								<div class="small-8 large-6 columns video-off">
									<button class="success radius bold"><i class="icon-videocam-1"></i><span class="hide-for-small">Start Streaming Video</span></button>
								</div>
								<div class="small-8 large-6 columns video-on">
                  <div class="loading-button">
									 <button class="secondary radius bold"><i class="icon-stop"></i><span class="hide-for-small">Stop Streaming Video</span></button>
                   <span class="button secondary disabled loading radius"><i class="icon-rocket-spinner animate-spin"></i> <span class="hide-for-small">Stopping Video...</span></span>
                  </div>
								</div>
							<% } else { %>
								<div class="small-8 large-6 columns video-off">
									<div class="loading-button">
										<button class="photo radius bold"><i class="icon-camera"></i><span class="hide-for-small">Take Photo</span></button>
										<span class="loading button disabled radius"><i class="icon-rocket-spinner animate-spin"></i> <span class="hide-for-small">Taking photo...</span></span>
									</div>
								</div>
							<% } %>
							<div id="camera-mode-slider" class="small-4 large-3 columns camera-mode" align="right">
								<p>
									<i class="icon-picture-1"></i>
									<i class="icon-videocam-1"></i>
								</p>
								<div class="switch radius">
									<input id="camera-mode-camera" name="camera-mode" type="checkbox" value="yes" <% if(this.cameraMode == 'video') { %> checked <% } %>>
									<label for="camera-mode-camera"></label>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		<% }
	} %>
<% } else { %>
	<div class="panel text-center radius">
		<i class="icon-camera"></i>
		<h3 class="bold">No Camera Detected</h3>
		<p>Connect a USB camera and start monitoring your prints. Take photos, create timelapses, or stream live video. Connect to your AstroPrint.com account and check on your print from anywhere.</p>
    {% if mfDefinition.variant.allow_camera_settings %}
		  <p>If you turned on your Astrobox before plugging the camera, please, <a href="/#settings/video-stream"><b>click here</b></a> and press the <b>"Scan for Cameras"</b> button</p>
    {% endif %}
	</div>
<% } %>
</script>
